<template>
    <div class="header">
        <div class="header-return"
        v-show="showHeader" @click="tohome">
        
    <span class="iconfont">
       &#xe64a;
    </span>

        </div>

        <div class="header-top" v-show="!showHeader"
          :style="styleopacity"
      >
           
  <div class="header-left" @click="tohome">
        <span class="iconfont">
       &#xe64a;
    </span>
  </div>
   最牛逼的风景区
    </div>
   
   
    </div>

   
</template>
<style scoped lang='stylus'>
@import '~css/var.styl'
.header-return{
    position: absolute;
    left: .1rem;
    top: .1rem;
    width: .72rem;
    height: .72rem;
    background: rgba(0,0,0,.5);
    border-radius: 50%;
    
}
.iconfont{
    display: block;
    width: 100%;
    height: 100%;
    line-height: .72rem;
    position: absolute;
    text-align: center;
   font-size: .56rem;
}
.header-top{
    position:fixed;
    top:0;
    width: 100%;
    line-height: .88rem;
    background:$bgcolor;
    color: $textcolor;
    font-size: .36rem; 
    text-align:center;
   
   
    }
    .header-left{
        position:absolute;
        font-size:.28rem;
        width: .4rem;
       

        padding 0.2em 0.1rem;
        font-weight: bold;
       
    }
</style>
<script>
export default {
    data(){
        return{
            showHeader:true,
            styleopacity:{
                opacity:0
            }
        }
    },
    mounted(){
       let that=this;
        window.addEventListener("scroll",function(){
            let top=document.documentElement.scrollTop;
            if(top>20){
                let opacity=top/130;
                opacity=opacity>1?1:opacity
               that.styleopacity={opacity}
                that.showHeader=false;

            }else{
                that.showHeader=true;
            }
        })
    },
    methods:{
        tohome(){
            this.$router.push('/')
        }
    }
    
}
</script>